<!DOCTYPE html>
<html>
<head>
    <title>网格系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <h1>Hello World!</h1>
    <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p>
    <div class="row">
        <div class="col" style="background-color:lavender;">.col</div>
        <div class="col" style="background-color:orange;">.col</div>
        <div class="col" style="background-color:lavender;">.col</div>
    </div>
</div>
<div class="container-fluid">
    <h1>Hello World!</h1>
    <p>重置浏览器大小查效果。</p>
    <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
    <div class="row">
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    </div>
</div><div class="container-fluid">
    <h1>Hello World!</h1>
    <p>重置浏览器大小查效果。</p>
    <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
    <div class="row">
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    </div>
</div>

<div class="container-fluid">
    <h1>Hello World!</h1>
    <p>重置浏览器大小查效果。</p>
    <p>在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
    <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
        <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
    </div>
</div>
<div class="container-fluid">
    <h1>平板与桌面的网格布局</h1>
    <p>以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
    </p>
    <p>重置浏览器窗口大小，查看效果。</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-6 bg-success">
                RUNOOB
            </div>
            <div class="col-sm-9 col-md-6 bg-warning">
                菜鸟教程
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <h1>平板、桌面、大桌面显示器、超大桌面显示器</h1>
    <p>以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。</p>
    <p>重置浏览器窗口大小，查看效果。</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
                RUNOOB
            </div>
            <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
                菜鸟教程
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <h1>偏移列</h1>
    <p>.offset-md-4 是把.col-md-4 往右移了四列格。</p>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 bg-success">.col-md-4</div>
            <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div>
            <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div>
        </div>
    </div>
</div>

</body>
</html>